<template>
  <el-icon v-if="isElName">
    <component :is="displayIconName"></component>
  </el-icon>
  <svg v-else :style="iconStyle" class="svg-icon mr5" aria-hidden="true">
    <use :xlink:href="symbolId" class="icon" />
  </svg>
</template>

<script setup lang="ts" name="SvgIcon">
import { computed, CSSProperties } from 'vue';

interface SvgProps {
  name: string; // 图标的名称 ==> 必传
  prefix?: string; // 图标的前缀 ==> 非必传（默认为"icon"）
  iconStyle?: CSSProperties; // 图标的样式 ==> 非必传
}

const props = withDefaults(defineProps<SvgProps>(), {
  prefix: 'icon',
  iconStyle: () => ({
    width: '1em',
    height: '1em'
  })
});

const isElName = computed(() => props.name.includes('el-'));

const displayIconName = computed(() => {
  if (isElName.value) {
    return props.name.split('el-')[1];
  }
  return props.name;
});

const symbolId = computed(() => `#${props.prefix}-${displayIconName.value}`);
</script>
<style lang="scss" scope>
.svg-icon {
  position: relative;
  width: 1em;
  min-width: 16px;
  height: 1em;
  min-height: 16px;
  vertical-align: -2px;
  outline: none;
  fill: currentColor;
}
</style>
